<template>
	<view style="width: 100%;">
		<view class="center" style="width: 100%;margin-top: 80rpx;">
			<image src="/static//Tumblr.png" style="width: 120rpx;" mode="widthFix"></image>
			<view style="margin-top: 20rpx;font-size: 40rpx;">Tumblr</view>
			<view style="margin-top: 20rpx;font-size: 20rpx;color: #CCCCCC;">版本号 v1.0.5</view>
		</view>
		<view class='personal-data'>
			<view class='list' style="margin-top: 60rpx;">
				<view class='item acea-row row-between-wrapper'>
					
					<view class="input" @click="gohtml('http://www.baidu.com')"> 
					<view>隐私政策</view>
					</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view class="input" @click="gohtml('http://www.baidu.com')"> 
					<view>用户协议</view>
					</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					
					<view class="input" @click="gohtml('http://www.baidu.com')">
						<view>使用帮助</view>
					</view>
				</view>
			</view>
			
			<view class='list' style="margin-top: 20rpx;">
				<view class='item acea-row row-between-wrapper'>
					<view>官方电话</view>
					<view class="input" @click="tel('059523505000')">
						00000000000<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>官方网址</view>
					<view class="input" @click="gohtml('http://www.baidu.com')">
						http://www.baidu.com
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;padding:100rpx 40rpx;" class="center">
			<view style="margin-top: 18rpx;font-size: 20rpx;color: #333333;text-align: center;" class="center">
			Copyright © 2022 Tumblr 版权所有
			</view>
			<view style="margin-top: 18rpx;font-size: 20rpx;color: #333333;text-align: center;" class="center" @click="gohtml('https://beian.miit.gov.cn/')">
				 闽ICP备20004518号-x
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: screenHeight,
			}
		},
		onLoad() {
			//console.log(this.screenHeight)
		},
		methods: {
			go(url){
				uni.navigateTo({
					url:url
				})
			},

			gohtml(url){
				//console.log(321)
				this.go('../push/web?url='+url)
			},

			tel(a){
				//console.log(123)
				// #ifdef APP-PLUS
				
				
				uni.makePhoneCall({
				    phoneNumber: a ,//仅为示例
					success(e) {
						//console.log(e)
					},
					fail(e) {
						//console.log(e)
					}
				});
				// #endif
			}
		}
	}
</script>


<style scoped lang="scss">
	page{
		height: 100%;
	}
	.d-flex{
		display: flex;
	}
	.between{
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.wrap{
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.l-center{
		-webkit-align-items: center;
		align-items: center;
	}
	.l-end{
		-webkit-align-items: flex-end;
		align-items: flex-end;
	}
	.end{
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}
	.center{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.one{
		-webkit-flex: 1;
		flex: 1;
	}
	.personal-data .wrapper {
		margin: 10rpx 0;
		background-color: #fff;
		padding: 36rpx 30rpx 13rpx 30rpx;
	}

	.personal-data .wrapper .title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item {
		width: 690rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
		padding: 0 30rpx;
		position: relative;
		border: 2rpx solid #f8f8f8;
		box-sizing: border-box;
	}

	.personal-data .wrapper .wrapList .item.on {
		border-color: #e93323;
		border-radius: 20rpx;
		background-image: url("");
		background-size: 100% 100%;
		background-color: #fff9f9;
		background-repeat: no-repeat;
	}

	.personal-data .wrapper .wrapList .item .picTxt {
		width: 445rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue {
		width: 96rpx;
		height: 96rpx;
		position: relative;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text {
		width: 325rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .name {
		width: 100%;
		font-size: 30rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.personal-data .wrapper .wrapList .item .bnt {
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 27rpx;
		width: 140rpx;
		height: 54rpx;
		border: 2rpx solid #e93323;
	}

	.personal-data .wrapper .wrapList .item .currentBnt {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 26rpx;
		background-color: rgba(233, 51, 35, 0.1);
		width: 140rpx;
		height: 48rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.personal-data .list {
		margin-top: 15rpx;
		background-color: #fff;
	}

	.personal-data .list .item {
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		width:100%;
		height: 100%;
		color: #353535;
	}

	.personal-data .list .item .input .id {
		width: 365rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 35rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}

	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin: 30rpx auto 0 auto;
	}
</style>
